<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端网址导航</title>
  <link rel="stylesheet" href="style.css">
  <style>
    html {background: #3a3a40}
  </style>
</head>
<body>
  <div class="container">
    <div class="category-list"></div>
    <div class="bookmark-container">

      <div class="category-card">
        <div class="category-title">前端期刊</div>
        <div class="category-body">

          <div class="bookmark" data-url="https://frontendfoc.us/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">Frontend Focus</div>
              <div class="desc">每周一期的最佳前端新闻、文章和教程综述。HTML、CSS、WebGL、Canvas、等浏览器技术。</div>
            </div>
          </div>
      
          <div class="bookmark" data-url="https://javascriptweekly.com/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">JavaScript Weekly</div>
              <div class="desc">JavaScript 文章、新闻和酷项目的邮件订阅。</div>
            </div>
          </div>

          <div class="bookmark" data-url="https://css-weekly.com/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">CSS Weekly</div>
              <div class="desc">每周一封电子邮件订阅，综述CSS文章，教程、实验和工具</div>
            </div>
          </div>

          <div class="bookmark" data-url="https://responsivedesign.is/newsletter/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">RWD Weekly Newsletter</div>
              <div class="desc">每周一次，免费提供响应性设计文章、工具、技巧、教程和灵感链接。</div>
            </div>
          </div>

          <div class="bookmark" data-url="https://web-design-weekly.com/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">Web Design Weekly</div>
              <div class="desc">了解最新的网页设计和前端趋势。接收每周时事邮件，获取最新的新闻、工具和教程。</div>
            </div>
          </div>

          <div class="bookmark" data-url="https://sidebar.io/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">Sidebar</div>
              <div class="desc">全网收集最好的设计链接，每周推荐。</div>
            </div>
          </div>

        </div>
      </div>

      <div class="category-card">
        <div class="category-title">社区论坛</div>
        <div class="category-body">

          <div class="bookmark" data-url="https://stackoverflow.com/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">Stackoverflow</div>
              <div class="desc">在这里，你遇到的问题，大概率都能找到答案。</div>
            </div>
          </div>

          <div class="bookmark" data-url="https://github.com/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">Github</div>
              <div class="desc">全球最大的同X交友平台，最火最热的开源项目大多在这里迭代、讨论。</div>
            </div>
          </div>

          <div class="bookmark" data-url="https://segmentfault.com/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">思否</div>
              <div class="desc">中文技术讨论社群，汇聚大量技术探讨话题。</div>
            </div>
          </div>

          <div class="bookmark" data-url="https://cnodejs.org/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">CNode</div>
              <div class="desc">Node.js 中文社区。</div>
            </div>
          </div>

          <div class="bookmark" data-url="https://juejin.cn/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">稀土掘金</div>
              <div class="desc">前端社区，包含技术讨论和文章分享，各类高质量的付费掘金小册。</div>
            </div>
          </div>

        </div>
      </div>

      <div class="category-card">
        <div class="category-title">大企业组织</div>
        <div class="category-body">

          <div class="bookmark" data-url="http://www.alloyteam.com/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">AlloyTeam</div>
              <div class="desc">腾讯 Web 前端团队，热衷 HTML5、移动 Web 技术，用最酷的新技术开发各种有趣的开源项目。</div>
            </div>
          </div>

          <div class="bookmark" data-url="http://fex.baidu.com/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">百度FEX</div>
              <div class="desc">FEX 原属于「Web 前端研发部」，现在核心成员都在百度云，致力于将前端技术做成技术产品。</div>
            </div>
          </div>

          <div class="bookmark" data-url="https://cdc.tencent.com/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">腾讯CDC</div>
              <div class="desc">腾讯用户研究与体验设计部，致力于提升腾讯产品的用户体验，探索互联网生态体验创新</div>
            </div>
          </div>

          <div class="bookmark" data-url="http://edux.design/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">讯飞EDUX</div>
              <div class="desc">教育事业群研发中心用户体验团队。</div>
            </div>
          </div>

          <div class="bookmark" data-url="http://meux.baidu.com/">
            <div class="icon"></div>
            <div class="intro">
              <div class="title">百度MEUX</div>
              <div class="desc">百度移动生态用户体验设计中心，让生活因设计而更美好。
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="category-card">
        <div class="category-title">前端框架</div>
        <div class="category-body">
          <div class="bookmark">
            <div class="icon">2</div>
            <div class="title">4</div>
            <div class="desc">565656</div>
          </div>
        </div>
      </div>

      <div class="category-card">
        <div class="category-title">UI框架</div>
        <div class="category-body">
          <div class="bookmark">
            <div class="icon">2</div>
            <div class="title">4</div>
            <div class="desc">565656</div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <script defer src="index.js"></script>
</body>
</html>